import TinyReact from './TinyReact'
import render from './TinyReact/render'

const root = document.getElementById('root')

const virtualDOM = (
  <div className="container">
    <h1>你好</h1>
    <h2 data-test="test">编码</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    {2 === 1 && <div>如果2和1相等展示该内容</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert('测试')}>点击</button>
    <h3>这个节点会被替换</h3>
    <input type="text" value="abc" />
  </div>
)

const modifyDOM = (
  <div className="container">
    <h1>你好</h1>
    <h2 data-test="test123">编码</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    {2 === 1 && <div>如果2和1相等展示该内容</div>}
    <span>这是一段修改过的内容</span>
    <button onClick={() => alert('测试123')}>点击</button>
    <h6>这个节点会被替换</h6>
    <input type="text" value="abc" />
  </div>
)

// TinyReact.render(virtualDOM, root)

// setTimeout(() => {
//   TinyReact.render(modifyDOM, root)
// }, 2000)

function Demo () {
  return <div>Hello</div>
}

function Heart (props) {
  return (
    <div>
      {props.title}
      &hearts;<Demo />
    </div>
  )
}

// TinyReact.render(<Heart title="Hello React" />, root)

class Alert extends TinyReact.Component {
  constructor (props) {
    super(props)
    this.state = {
      title: 'default title'
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    this.setState({
      title: 'changed title'
    })
  }
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps')
  }
  componentWillUpdate () {
    console.log('componentWillUpdate')
  }
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  render () {
    return (
      <div>
        {this.props.name}
        {this.props.age}
        <div>
          {this.state.title}
          <button onClick={this.handleClick}>改变title</button>
        </div>
      </div>
    )
  }
}

// TinyReact.render(<Alert name="张三" age={20} />, root)

// setTimeout(() => {
//   TinyReact.render(<Alert name="李四" age={50} />, root)
//   // TinyReact.render(<Heart title="heart组件" />, root)
// }, 2000)

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    console.log(this.input.value)
    console.log(this.alert)
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }
  render() {
    return (
      <div>
        <input type="text" ref={input => (this.input = input)} />
        <button onClick={this.handleClick}>按钮</button>
        <Alert ref={alert => this.alert = alert} name="李四" age={50} />
      </div> 
    )
  }
}

// TinyReact.render(<DemoRef />, root)

class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [{
        name: '张三',
        id: 1
      }, {
        name: '李四',
        id: 2
      }, {
        name: '王五',
        id: 3
      }, {
        name: '赵六',
        id: 4
      }]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    const newState = JSON.parse(JSON.stringify(this.state))
    // newState.persons.push(newState.persons.shift())
    // newState.persons.splice(1, 0, { name: '李逵', id: 100 })
    newState.persons.pop()
    this.setState(newState)
  }
  render () {
    return (
      <div>
        <ul>
          {this.state.persons.map(person => (
            <li key={person.id} style="list-style: none">
              {person.name}
              <DemoRef />
            </li>
          ))}
        </ul>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}

TinyReact.render(<KeyDemo />, root)